<template>
  <div class='news'>
      <div class='newsBox'>
          <ul>
              <li v-for='data in NewsData' :key="data.id">
                  <div class='left'>{{data.pubDateStr}}</div>
                  <div class='right'>
                      <div class='title'>{{data.title}}</div>
                      <div class='info'>{{data.summary}}</div>
                  </div>
                  <div class='goNew'><a :href="data.sourceUrl">&gt;</a></div>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    NewsData: {
      type: Array,
      default: () => { return [] }
    }
  }
}
</script>

<style lang='scss' scoped>
.news{
    width: 100%;
    padding:12px 16px;
    .newsBox{
        width: 100%;
        ul{
            display: flex;
            flex-direction: column;
            position: relative;
            li{
                width: 100%;
                display: flex;
                padding:15px 16px;
                border-bottom:1px solid  rgba(0, 0, 0, 0.067);
                transition:0.2s;
                .left{
                    width: 58px;
                    height: 17px;
                    line-height: 17px;
                    font-size: 12px;
                    font-weight: 700;
                    background: #f74c31;
                    color:#fff;
                    text-align: center;
                }
                .right{
                    flex:1;
                    margin:0 7px;
                    overflow: hidden;
                    .title{
                        line-height: 22px;
                        font-size: 16px;
                        font-weight: 700;
                        color:#333;
                    }
                    .info{
                        margin-top:3px;
                        color:#999;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 17px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .goNew{
                    width: 9px;
                    height: 100%;
                    font-size: 15px;
                    color:#999;
                }
            }
            li:hover{
                transform: scale(1.02);
                cursor: pointer;
            }
            li:last-child{
                border:none;
            }
        }
        ul::after{
            content:'';
            display:block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            box-shadow: 0 0 5px rgba(128, 128, 128, 0.314);
        }
    }
}
</style>
